<template>
  <div class="portal-contain" v-if="this.pageParams.length > 0">
    <div
      :class="
        'portal-item ' +
        (pageParams[1] != undefined ? 'harf-height ' : '') +
        (isexpand > 0 && isexpand <= 3 ? 'portalexpand' : '')
      "
      v-if="Array.isArray(pageParams[0]) && pageParams[0].length > 0"
      v-show="isexpand == 0 || (isexpand > 0 && isexpand <= 3)"
    >
      <div
        :class="
          'portal-item ' +
          (pageParams[0][1] != undefined ? 'harf-width ' : '') +
          (isexpand == 1 ? 'portalexpand' : '')
        "
        v-if="pageParams[0][0] != undefined"
        v-show="isexpand == 0 || isexpand == 1"
      >
        <portal-item
          :root="root ? root : null"
          :pageParams="pageParams[0][0][0]"
          :portalItemId="1"
          :rowParams="rowParams"
        >
        </portal-item>
      </div>
      <resize-bar
        v-if="pageParams[0][1] != undefined"
        v-show="!isexpand"
      />
      <div
        :class="
          'portal-item harf-width ' + (isexpand == 2 ? 'portalexpand ' : '')
        "
        v-if="pageParams[0][1] != undefined"
        v-show="isexpand == 0 || isexpand == 2"
      >
        <portal-item
          :root="root ? root : null"
          :portalItemId="2"
          :pageParams="pageParams[0][1][0]"
          :rowParams="rowParams"
        >
        </portal-item>
      </div>
      <div
        :class="
          'portal-item ' +
          (pageParams[1] != undefined ? 'harf-height ' : '') +
          (isexpand == 3 ? 'portalexpand' : '')
        "
        v-if="!Array.isArray(pageParams[0][0])"
        v-show="isexpand == 0 || isexpand == 3"
      >
        <portal-item
          :root="root ? root : null"
          :portalItemId="3"
          :pageParams="pageParams[0]"
          :rowParams="rowParams"
        >
        </portal-item>
      </div>
    </div>
    <resize-bar
      :resizeType="'y'"
      v-if="pageParams[1] != undefined"
      v-show="!isexpand"
    />
    <div
      :class="
        'portal-item harf-height ' +
        (isexpand > 3 && isexpand <= 6 ? 'portalexpand' : '')
      "
      v-if="pageParams[1] != undefined"
      v-show="isexpand == 0 || (isexpand > 3 && isexpand <= 6)"
    >
      <div
        :class="
          'portal-item ' +
          (pageParams[1][1] != undefined ? 'harf-width ' : '') +
          (isexpand == 4 ? 'portalexpand' : '')
        "
        v-if="pageParams[1][0]"
        v-show="isexpand == 0 || isexpand == 4"
      >
        <portal-item
          :root="root ? root : null"
          :portalItemId="4"
          :pageParams="pageParams[1][0][0]"
          :rowParams="rowParams"
        >
        </portal-item>
      </div>
      <resize-bar
        v-if="pageParams[1][1] != undefined"
        v-show="!isexpand"
      />
      <div
        :class="
          'portal-item harf-width ' + (isexpand == 5 ? 'portalexpand ' : '')
        "
        v-if="pageParams[1][1] != undefined"
        v-show="isexpand == 0 || isexpand == 5"
      >
        <portal-item
          :root="root ? root : null"
          :portalItemId="5"
          :pageParams="pageParams[1][1][0]"
          :rowParams="rowParams"
        >
        </portal-item>
      </div>
      <div
        :class="
          'portal-item ' +
          (pageParams[1] != undefined ? 'harf-height ' : '') +
          (isexpand == 6 ? 'portalexpand' : '')
        "
        v-if="!Array.isArray(pageParams[1][0])"
        v-show="isexpand == 0 || isexpand == 6"
      >
        <portal-item
          :root="root ? root : null"
          :portalItemId="6"
          :pageParams="pageParams[1]"
          :rowParams="rowParams"
        >
        </portal-item>
      </div>
    </div>
    <div :class="'portal-item'" v-if="!Array.isArray(pageParams[0])">
      <portal-item
        :root="root ? root : null"
        :portalItemId="7"
        :pageParams="pageParams"
        :rowParams="rowParams"
      >
      </portal-item>
    </div>
  </div>
</template>

<script>
import { getColumnLists } from "@/api/pms/dynamic";
import portalItem from "@/views/portal/portalItem";
import { deepClone } from "@/utils";

export default {
  inject: ["app"],
  name: "portalView",
  components: {
    resizeBar: () => import("@/views/components/resizeBar"),
    portalItem,
  },
  props: {
    params: {},
    root: {
      type: Object,
      default: ()=>{return{operational: '1'}}
    },
  },
  watch: {
    root(val) {
      console.log(val);
    },
  },
  data() {
    return {
      pageParams: [],
      rowParams: {},
      portal: "",
      flag: true,
      isexpand: 0,
    };
  },
  mounted() {
    if (this.flag) {
      let params = JSON.parse(JSON.stringify(this.$route.query));
      let arr = this.$route.path.split("/");
      let len = arr.length;
      if (params.pageParams) {
        if (typeof params.rowParams == "string") {
          params = JSON.parse(
            sessionStorage.getItem(arr[len - 2] + arr[len - 1])
          );
        } else {
          sessionStorage.setItem(
            arr[len - 2] + arr[len - 1],
            JSON.stringify(params)
          );
        }
        var pageParams = params.pageParams;
      } else {
        var pageParams = JSON.parse(
          this.$route.meta.pageParams.replace(/'/g, '"')
        );
      }
      if (pageParams) {
        this.portal = Number(pageParams.portal);
      }
      if (params.rowParams) this.rowParams = deepClone(params.rowParams);
      if (pageParams && this.portal){
        this.pageParams = []
        getColumnLists("/pms/portalarea", { portalid: this.portal }).then(
          (response) => {
            for (let item of response.rows) {
              if (this.pageParams[item.row - 1] == undefined)
                this.pageParams[item.row - 1] = [];
              this.pageParams[item.row - 1][item.col - 1] = [item.id];
            }
            this.$forceUpdate();
          }
        );
      }
    }
  },
  watch: {
    params: {
      immediate: true,
      handler: function (val) {
        if (val) {
          this.flag = false;
          this.pageParams = []
          getColumnLists("/pms/portalarea", { portalid: val.portal }).then(
            (response) => {
              for (let item of response.rows) {
                if (this.pageParams[item.row - 1] == undefined)
                  this.pageParams[item.row - 1] = [];
                this.pageParams[item.row - 1][item.col - 1] = [item.id];
              }
              this.$forceUpdate();
            }
          );
        }
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.portal-contain {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.portal-item {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-collapse: collapse;
  overflow: auto;
  float: left;
}
.harf-width {
  width: calc(50% - 6px);
}
.harf-height {
  height: calc(50% - 6px);
}
.portalexpand {
  width: 100% !important;
  height: 100% !important;
}
</style>
